@import 'styles/ui.module';
@import 'styles/settings';
@import 'styles/common-animations.module';

$margin: 20px;

.sidebar {
  @extend %verticalScrollbar;
  display: inline-block;
  box-sizing: border-box;
  border-radius: $border-radius-mobile;
  height: 450px;
  position: fixed;
  bottom: $menuFooterHeight;
  overflow-x: hidden;

  @media #{$tablet-portrait} {
    @include animationFunction();
    position: absolute;
    top: $ui-left-top;
    height: calc(100vh - #{$ui-left-top});
    border-radius: 2px;
    bottom: auto;
  }
}

.scrollDisabled {
  overflow-y: hidden;
}

.wrapper {
  width: $sidebar-width;
  display: flex;
  flex-direction: column;
  width: 100%;

  @media #{$tablet-portrait} {
    overflow-y: unset;
    width: $sidebar-width;
    height: 100%;
  }
}